<template>
	<view class="">
		<view class="listbox" v-if="level == 1" v-for="(item,index) in list" :key='index'>
			<view class="card "  @click="handleToFinish(item)">
				<view class="flex align_center marbot8">
					<view class="tip ">{{item.appear_type}}</view>
				</view>
				<view class="font32 bold ellipsis  marbot8" style="margin-right: 16rpx;">{{item.title}}</view>
				<view class="marbot16" style="font-size: 24rpx;">{{item.appeal.createtime}}</view>
				<!-- 线 -->
				<view class="line marbot16"></view>
				
				
				<!-- 普通展示 -->
				<view class="heis ellipsis3 ">{{item.content}}</view>
				<view class="flex flex_wrap martop16">
					<view class="relative" style="width: calc((100% / 3) - 20rpx);margin: 10rpx;height: 0;padding-bottom: calc((100% / 3) - 20rpx);" v-for="(iten,ind) in item.material_files" :key='iten'>
						<image :src="iten.url" mode="aspectFill" style="width: 100%;height: 100%;display: block;position:  absolute;top:0;left: 0;border-radius: 8rpx;" @click.stop="handleImg(iten.url)" v-if="iten.type == 'img'"></image>
						<video @click.stop="handleVideo(iten.url)" :src="iten.url" :controls='false' :show-fullscreen-btn='false' :show-center-play-btn='false' :show-play-btn='false' v-if="iten.type == 'video'" style="width: 100%;height: 100%;position: absolute;"></video>
					</view>
				</view>
				<!-- 语音展示 -->
				<view class="yuyinBox shodow flex align_center martop16" style="width: 60%;" @click.stop="handleYuyinPaly(item,index)" v-if="item.voice_file">
					<view class="" style="margin-right: 10rpx;">
						<image src="/static/image/yuyin_no.png" mode="" style="width: 28rpx;height: 28rpx;display: block;" v-if="!item.flag"></image>
						<image src="/static/image/yuyin_act.gif" mode="" style="width: 28rpx;height: 28rpx;display: block;" v-if="item.flag"></image>
					</view>
					<view class="">{{item.voice_time}}</view>
				</view>
			</view>
		</view>
		<view class="listbox" v-if="level != 1" v-for="(item,index) in list" :key='index'>
			<view class="card "  @click="handleToFinish(item)">
				<view class="flex align_center marbot8">
					<view class="tip ">{{item.appeal.appear_type}}</view>
          <view :class="getReminderLevel(item.createtime * 1000) + '-reminder' + ' tip'" style="margin-left: 20rpx;" v-if="getReminderLevel(item.createtime * 1000) != ''">
            超时{{ getChineseDescription(getReminderLevel(item.createtime * 1000)) }}</view>
				</view>
				<view class="font32 bold ellipsis  marbot8" style="margin-right: 16rpx;">{{item.appeal.title}}</view>
				<view class="marbot16 heis" style="font-size: 24rpx;">{{item.appeal.createtime}}</view>
				<!-- 线 -->
				<view class="line marbot16"></view>
				
				<!-- 普通展示 -->
				<view class="heis ellipsis2 ">{{item.appeal.content}}</view>
				<view class="flex flex_wrap martop16">
					<view class="relative" style="width: calc((100% / 3) - 20rpx);margin: 10rpx;height: 0;padding-bottom: calc((100% / 3) - 20rpx);" v-for="(iten,ind) in item.appeal.material_files" :key='iten'>
						<image :src="iten.url" mode="aspectFill" style="width: 100%;height: 100%;display: block;position:  absolute;top:0;left: 0;border-radius: 8rpx;" @click.stop="handleImg(iten.url)" v-if="iten.type == 'img'"></image>
						<video @click.stop="handleVideo(iten.url)" :src="iten.url" :controls='false' :show-fullscreen-btn='false' :show-center-play-btn='false' :show-play-btn='false' v-if="iten.type == 'video'" style="width: 100%;height: 100%;position: absolute;"></video>
					</view>
				</view>
				<!-- 语音展示 -->
				<view class="yuyinBox shodow flex align_center martop16" style="width: 60%;" @click.stop="handleYuyinPaly(item.appeal,index)" v-if="item.appeal.voice_file">
					<view class="" style="margin-right: 10rpx;">
						<image src="/static/image/yuyin_no.png" mode="" style="width: 28rpx;height: 28rpx;display: block;" v-if="!item.appeal.flag"></image>
						<image src="/static/image/yuyin_act.gif" mode="" style="width: 28rpx;height: 28rpx;display: block;" v-if="item.appeal.flag"></image>
					</view>
					<view class="">{{item.appeal.voice_time}} s</view>
				</view>
			</view>
		</view>
		
		
		<videoMax :isShowVideo='isShowVideo' :videoUrl='videoUrl' @colse='handlecolse'></videoMax>
	</view>
</template>

<script>
	import videoMax from "../video_max/video_max.vue";
	// import videoMax from '../pilicy-item/PilicyItem.vue'
	// import PilicyItem from './pilicy-item/PilicyItem.vue'
	export default {
		name: 'task_list',
		components: { videoMax },
		props: {
			list: {
				type: Array,
				default() {
					return []
				}
			},
			level:{
				type:String,
				default:''
			}
		},
		data () {
			return {
				// tablist:[
				// 	{name:'未受理',id:1},
				// 	{name:'办结中',id:2},
				// 	{name:'已办结',id:3},
				// ],
				// current:0,
				innerAudioContext:null,
				palyIndex:-1,   // 选中的播放语音 
				clearTime:null,   //定时器
				isShowVideo:false,
				videoUrl:'',
			}
		},
		onLoad(e){
			this.innerAudioContext = uni.createInnerAudioContext();
			
		},
		methods: {
      getReminderLevel(timestamp) {
        const currentTime = new Date().getTime(); // 当前时间戳
        const timeDiff = currentTime - timestamp; // 当前时间与传入时间的时间差

        const sixHours = 6 * 60 * 60 * 1000; // 六小时的毫秒数
        const twelveHours = 12 * 60 * 60 * 1000; // 十二小时的毫秒数
        const twentyFourHours = 24 * 60 * 60 * 1000; // 二十四小时的毫秒数

        if (timeDiff >= twentyFourHours) {
          return 'red'; // 超过二十四小时，红色提醒
        } else if (timeDiff >= twelveHours) {
          return 'yellow'; // 超过十二小时，黄色提醒
        } else if (timeDiff >= sixHours) {
          return 'blue'; // 超过六小时，蓝色提醒
        } else {
          return ''; // 未超过六小时，无提醒
        }
      },
      getChineseDescription(reminderLevel) {
        switch (reminderLevel) {
          case 'red':
            return '已超时24小时以上';
          case 'yellow':
            return '已超时12-24小时';
          case 'blue':
            return '已超时6-12小时';
          default:
            return '未超时6小时以内';
        }
      },
			handleYuyinPaly(item,index){  // 语音播报
				let _this = this
				if(this.clearTime){
					clearTimeout(_this.clearTime)
				}
				if(index != _this.palyIndex && _this.palyIndex != -1){   // 说明有一个语音在播放   要先销毁那个语音然后再播放新的语音
					if(_this.innerAudioContext){
						// 先销毁   
						console.log(1)
						_this.innerAudioContext.pause();
						_this.innerAudioContext.destroy()
						_this.innerAudioContext = null
						_this.$emit('yuyingtime', {index:_this.palyIndex})
						// 再创建
						_this.innerAudioContext = uni.createInnerAudioContext();
						_this.innerAudioContext.autoplay = true;
						_this.innerAudioContext.src = item.voice_file;
						_this.clearTime = setTimeout(()=>{
							_this.innerAudioContext.pause();
							_this.innerAudioContext.destroy()
							_this.innerAudioContext = null
							// _this.list[index].flag = false
							console.log(111111)
							_this.$emit('yuyingtime', {index})
							_this.palyIndex = -1
						},(item.voice_time - 0) * 1000)
					}else{
						console.log(2)
						_this.innerAudioContext = uni.createInnerAudioContext();
						_this.innerAudioContext.autoplay = true;
						_this.innerAudioContext.src = item.voice_file;
						_this.clearTime = setTimeout(()=>{
							console.log(22222)
							_this.innerAudioContext.pause();
							_this.innerAudioContext.destroy()
							_this.innerAudioContext = null
							
							// _this.list[index].flag = false
							_this.$emit('yuyingtime', {index})
							_this.palyIndex = -1
						},item.voice_time * 1000)
					}
					_this.list[_this.palyIndex].flag = false
				}else{
					if(item.flag){   //关闭
						console.log(3)
						if(_this.innerAudioContext){
							_this.innerAudioContext.pause();
							_this.innerAudioContext.destroy()
							_this.innerAudioContext = null
						}
					}else{  //开启语音
						if(_this.innerAudioContext){
							console.log(4)
							_this.innerAudioContext.autoplay = true;
							_this.innerAudioContext.src = item.voice_file;
							_this.clearTime = setTimeout(()=>{
								_this.innerAudioContext.pause();
								_this.innerAudioContext.destroy()
								_this.innerAudioContext = null
								// _this.list[index].flag = false
								console.log(3333333)
								_this.$emit('yuyingtime', {index})
								_this.palyIndex = -1
							},(item.voice_time - 0) * 1000)
						}else{
							console.log(5)
							_this.innerAudioContext = uni.createInnerAudioContext();
							_this.innerAudioContext.autoplay = true;
							_this.innerAudioContext.src = item.voice_file;
							
							_this.clearTime = setTimeout(()=>{
								_this.innerAudioContext.pause();
								_this.innerAudioContext.destroy()
								_this.innerAudioContext = null
								// _this.list[index].flag = false
								console.log(444444)
								_this.$emit('yuyingtime', {index})
								_this.palyIndex = -1
							},(item.voice_time - 0) * 1000)
						}
						
					}
				}
				
				// this.list[index].flag = !item.flag
				console.log(item)
				this.$emit('yuying', {index,flag:item.flag})
				_this.palyIndex = index
			},
			
			handleImg(url){  // 查看图片
				uni.previewImage({
					urls:[url],
				})
			},
			handlecolse(){
				this.isShowVideo = false
			},
			handleVideo(url){  // 查看图片
				this.isShowVideo = true
				this.videoUrl = url
			},
			handleToFinish (info) {
				// if (info.is_urge_organization == 2) return
				this.$emit('click', info)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../uni.scss';
  /* 蓝色提醒列表样式 */
  .blue-reminder {
    color: blue !important; /* 设置文本颜色为蓝色 */
    border: 1px solid blue !important; /* 设置边框样式为蓝色实线边框 */
  }

  /* 黄色提醒列表样式 */
  .yellow-reminder {
    color: yellow !important; /* 设置文本颜色为黄色 */
    border: 1px solid yellow !important; /* 设置边框样式为黄色实线边框 */
  }

  /* 红色提醒列表样式 */
  .red-reminder {
    color: red !important; /* 设置文本颜色为红色 */
    border: 1px solid red !important; /* 设置边框样式为红色实线边框 */
  }
	.listbox{
		padding: 0 24rpx;
		background: #fff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		&:last-child{
			margin-bottom: 0rpx;
		}
		.card{
			padding:24rpx 0;
			.tip{
				padding: 2rpx 4rpx;
				border-radius: 8rpx;
				border: 1rpx solid #FF7D04;
				color: #FF7D04;
				font-size: 24rpx;
			}
			.yuyinBox{
				padding: 16rpx 24rpx;
				border-radius: 34rpx;
				background: #2979ff;
				color:#fff;
			}
			.line{
				width: 100%;
				height: 1rpx;
				background: rgba(0, 0, 0, .15);
			}
		}
	}
	.marbot24{
		margin-bottom: 24rpx;
	}
	.marbot8{
		margin-bottom: 8rpx;
	}
	.marbot16{
		margin-bottom: 16rpx;
	}
	.martop16{
		margin-top: 16rpx;
	}
	.martop24{
		margin-top: 24rpx;
	}
</style>